<template>
  <div class="inspection">
    <div class="inspection-item" v-for="(title, level) in titles" :key="level">
      <div class="title-wrapper">
        <div class="item-title">{{ title }}</div>
        <div class="title-btn" v-if="addPermission">
          <el-button
            type="text"
            v-throttling
            @click="addItem(level)"
            style="padding: 0; height: 14px; line-height: 14px; font-size: 14px"
          >
            <i class="el-icon-plus"></i>
            新增项目
          </el-button>
        </div>
      </div>
      <div
        class="list-wrapper"
        v-if="getLevelListData(level) && getLevelListData(level).length"
      >
        <template v-for="(item, index) in getLevelListData(level)">
          <div
            @click="setActive(level, index)"
            class="list-item"
            :key="index"
            :class="index === levelStatus[level].index ? 'active' : 'inactive'"
          >
            <div :class="{ grayed: item.dataStatus === 0 }">
              {{ item.name
              }}{{ item.categorySuffix ? `(${item.categorySuffix})` : '' }}
            </div>
            <div
              class="btn-group"
              v-if="
                index === levelStatus[level].index && levelStatus[level].clicked
              "
            >
              <span
                v-if="detailPermission"
                @click="viewDetail(item)"
                v-throttling
                class="btn-view"
              ></span>
              <span
                v-if="editPermission"
                class="btn-edit"
                v-throttling
                @click="editDetail(item)"
              ></span>
              <span
                v-if="delPermission"
                v-throttling
                class="btn-delete"
                @click="deleteDetail(item)"
              ></span>
            </div>
          </div>
        </template>
      </div>
      <el-empty
        v-else
        :image="require('@/assets/emptyBackGround.png')"
        description="暂无数据"
        :image-size="200"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import {
  list,
  batchDelete
} from '@/api/elevator-archives/configuration/eleFaultCode';

export default {
  name: 'CheckDetail',
  components: {},
  props: {
    titles: {
      type: Array,
      default: () => ['一级巡检项目', '二级巡检项目', '三级巡检项目']
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      levelStatus: [
        {
          index: 0,
          clicked: false
        },
        {
          index: 0,
          clicked: false
        },
        {
          index: 0,
          clicked: false
        }
      ],
      // 权限
      addPermission:
        this.$store.state.permission.btnAuth.indexOf(
          this.$route.path + '{add}'
        ) > -1,
      detailPermission:
        this.$store.state.permission.btnAuth.indexOf(
          this.$route.path + '{detail}'
        ) > -1,
      editPermission:
        this.$store.state.permission.btnAuth.indexOf(
          this.$route.path + '{edit}'
        ) > -1,
      delPermission:
        this.$store.state.permission.btnAuth.indexOf(
          this.$route.path + '{del}'
        ) > -1
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    data: {
      handler(val) {
        this.refreshPage();
      },
      deep: true
    }
  },
  methods: {
    refreshPage() {
      // this.levelStatus = [
      //   {
      //     index: 0,
      //     clicked: false
      //   },
      //   {
      //     index: 0,
      //     clicked: false
      //   },
      //   {
      //     index: 0,
      //     clicked: false
      //   }
      // ];

      for (let i = 0; i < this.titles.length; i++) {
        this.getLevelListData(i);
      }
    },
    deleteDetail(data) {
      this.$emit('deleteDetail', data);
    },
    editDetail(data) {
      this.$emit('editDetail', data);
    },
    viewDetail(data) {
      this.$emit('viewDetail', data);
    },
    addItem(level) {
      this.$emit('addItem', {
        level: level + 1, // 接口返回中level=1是第一级，没有level=0
        parent: this.getParentData(level)
      });
    },
    setActive(level, index) {
      this.resetLevelStatus(level);

      this.$set(this.levelStatus[level], 'index', index);
      this.$set(this.levelStatus[level], 'clicked', true);
    },
    resetLevelStatus(level) {
      for (let i = 0; i < this.levelStatus.length; i++) {
        if (i >= level) {
          // 只把当前点击的层级和子集置为0，上级不能置0，否则选项就变成了其他项目
          this.$set(this.levelStatus[i], 'index', 0);
        }

        this.$set(this.levelStatus[i], 'clicked', false);
      }
    },
    getParentData(level) {
      if (level === 0) {
        return '';
      } else if (level === 1) {
        let parent = this.data[this.levelStatus[level - 1].index];

        return parent;
      } else if (level === 2) {
        let result = null;
        let lvl0 = this.data[this.levelStatus[0].index];
        let lvl1 = [];

        if (lvl0 && lvl0.children.length) {
          lvl1 = lvl0.children[this.levelStatus[1].index];

          if (lvl1) {
            result = lvl1;
          } else {
            result = 'parentInvalid';
          }
        } else {
          result = 'parentInvalid';
        }

        if (result === 'parentInvalid') {
          this.$message.error('无法新增项目，' + this.titles[1] + '为空');
        }

        return result;
      }
    },
    getLevelListData(level) {
      if (level === 0) {
        return this.data.filter(item => item.level === 1);
      } else if (level === 1) {
        let parent = this.data[this.levelStatus[level - 1].index];

        if (parent && parent.children) {
          return parent.children;
        }
      } else if (level === 2) {
        let lvl0 = this.data[this.levelStatus[0].index];
        let lvl1 = [];
        let lvl2 = [];

        if (lvl0 && lvl0.children) {
          lvl1 = lvl0.children[this.levelStatus[1].index];

          if (lvl1 && lvl1.children) {
            lvl2 = lvl1.children;

            return lvl2;
          } else {
            return [];
          }
        } else {
          return [];
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inspection {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
}
.inspection-item {
  background: #fff;
  flex: 1;
  margin: 5px;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;

    .item-title {
      text-align: center;
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
    }

    .title-btn {
      font-size: 14px;
    }
  }

  .list-wrapper {
    overflow-y: auto;

    .list-item {
      background: #f6f6f6;
      height: 38px;
      border-radius: 4px;
      padding: 12px;
      color: #3d3d3d;
      line-height: 14px;
      font-size: 14px;
      cursor: pointer;
      margin: 5px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .grayed {
        color: #aaa;
      }
    }

    .list-item.active {
      background: #fff;
      border: 1px solid #0d48ce;
      color: #0d48ce;
    }

    .list-item.active:hover {
      background: rgba(13, 72, 206, 0.1);
    }

    .list-item.inactive {
      background: #f6f6f6;
      border: none;
      color: #3d3d3d;
    }

    .btn-group {
      width: 54px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .btn-group span {
      display: inline-block;
      width: 14px;
      height: 14px;
      background-position: center;
    }

    .btn-view {
      background: url('~@/assets/widget/small-view-btn.svg') no-repeat;
    }

    .btn-edit {
      background: url('~@/assets/widget/small-edit-btn.svg') no-repeat;
    }

    .btn-delete {
      background: url('~@/assets/widget/small-delete-btn.svg') no-repeat;
    }
  }
}

.list-wrapper {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
